<!--
 * @Author: windys
 * @Description: 回看
 * @Date: 2022-03-09 16:23:57
-->
<template>
  <div class="look_back">
    <van-sticky>
      <van-nav-bar
        title="直播回看"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #right>
          <span style="color: #fff">
            录播 <van-icon name="play-circle-o"
          /></span>
        </template>
      </van-nav-bar>
      <video-player
        ref="videoPlayer"
        :url="url"
        :coverUrl="data.coverUrl"
      ></video-player>
    </van-sticky>

    <div class="title">{{ data.title }}</div>
    <div class="note">简介：{{ data.note }}</div>
    <div class="lessons">
      <div class="title">目录</div>
      <div
        class="item"
        v-for="(el, index) in data.lessons"
        :key="el.lessonId"
        @click="handleClick(el)"
      >
        {{ index + 1 }} . {{ el.title }}
        <van-icon name="play-circle-o" />
        <span>{{ el.viewPersons }}观看</span>
      </div>
    </div>

    <div class="comment_list" v-if="list.length">
      <div class="title">评价</div>
      <div class="item" v-for="item in list" :key="item.lessonId">
        <div class="left">
          <van-image
            :src="item.headUrl"
            width="30"
            height="30"
            round
            fit="contain"
          />
        </div>
        <div class="right">
          <div class="nick">
            {{ item.nick }}
            <van-rate v-model="item.star" size="10" class="rate" />
          </div>
          <div class="content_commnet">{{ item.content }}</div>
        </div>
      </div>
    </div>
    <div v-else class="no_data comment_list">
      <div class="title">评价</div>
      <img src="../../../assets/img/nodata.png" alt="" srcset="" />
      <p>暂无数据</p>
    </div>
  </div>

  <CommentText ref="CommentText" @handleSendText="handleSendText" />
  <!-- 录播 -->
  <backView
    ref="backView"
    @handleChangeLookBack="handleChangeLookBack"
  ></backView>
  <van-dialog
    v-model:show="show"
    title="支付"
    show-cancel-button
    @confirm="handlePay"
  >
    <div class="content">
      <p>该回放属于付费内容请支付后观看</p>
      <span class="price">{{ data.price ? data.price + "金石" : "免费" }}</span>
      <span class="vip">
        <i class="iconfont icon-VIP1"></i>
        {{ data.vipPrice ? data.vipPrice + "金石" : "免费" }}</span
      >
    </div>
  </van-dialog>
</template>



<script >
import {
  defineComponent,
  nextTick,
  onMounted,
  ref,
  watch,
  watchEffect,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  getCsTbDetail,
  getCommentListLookBack,
  getVideosById,
  payLive,
  commentLookBack,
} from "@/api/live";
import { Toast } from "vant";
import backView from "../backView.vue";
import storage from "../../../utils/storage";
export default defineComponent({
  components: {
    backView,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const url = ref("http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4");
    const coverUrl = ref("");
    const videoPlayer = ref();
    const data = ref({});
    const show = ref(false);

    function onClickLeft() {
      if (route.query.from) {
        router.push(storage.getSession("prePath"));
      } else {
        router.push("/my");
      }
    }

    onMounted(() => {
      setTimeout(() => {
        videoPlayer.value.init();
      }, 100);
      setTimeout(() => {
        init();
      }, 150);
    });

    const init = async () => {
      const res = await getCsTbDetail({
        csTabId: route.query.csTabId,
      });
      if (typeof res == "object") {
        data.value = res;
        // 自动查询第一个
        if (res.lessons && res.lessons.length) {
          handleClick(res.lessons[0]);
        }
      }
    };

    const handleClick = (el) => {
      initVideoUrl(el.lessonId);
      initComment(el.lessonId);
    };

    const c_lessonId = ref("");
    const initVideoUrl = async (lessonId) => {
      c_lessonId.value = lessonId;
      const res = await getVideosById({
        lessonId,
      });
      if (res === 2001) {
        // 需要支付
        show.value = true;
      } else {
        if (res && res[0]) {
          videoPlayer.value.Myplayer.src = res[0].videoUrl;
        }
      }
    };

    const list = ref([]);
    const initComment = async (lessonId) => {
      const res = await getCommentListLookBack({
        lessonId,
        pageIndex: 1,
        pageSize: 100,
      });
      if (res && res.length) {
        list.value = res;
      }
    };

    const handlePay = async () => {
      const res = await payLive({
        liveId: route.query.liveId,
        csTabId: route.query.csTabId,
      });
      if (typeof res == "string") {
        init();
      }
    };

    const CommentText = ref();
    const handleSendText = async (v) => {
      const res = await commentLookBack({
        content: v,
        lessonId: c_lessonId.value,
        star: 5,
      });
      if (typeof res == "object") {
        Toast.success("评论成功");
        initComment(c_lessonId.value);
        CommentText.value.clear();
      }
    };

    // 录播
    const backView = ref();
    const onClickRight = () => {
      console.log(backView.value);
      backView.value.show = true;
      backView.value.init(route.query.csTabId);
    };

    watch(
      () => route.fullPath,
      (val) => {
        init();
      }
    );
    const handleChangeLookBack = () => {};
    return {
      CommentText,
      backView,
      show,
      data,
      url,
      videoPlayer,
      list,
      onClickLeft,
      handleClick,
      handlePay,
      handleSendText,
      onClickRight,
      handleChangeLookBack,
    };
  },
});
</script>



<style lang="scss" scoped>
.look_back {
  padding-bottom: 100px;
}
.title {
  font-size: 16px;
  padding: 10px;
}
.note {
  font-size: 14px;
  padding: 10px;
  color: #747171;
}
.lessons {
  margin: 10px;
  .title {
    font-size: 16px;
  }
  .item {
    width: 95%;
    margin: 0px auto;
    font-size: 14px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgb(240, 237, 237);
    position: relative;
    span {
      position: absolute;
      right: 0;
      font-size: 10px;
      color: #ccc;
    }
  }
}
.comment_list {
  padding: 0 10px;
  .title {
    font-size: 16px;
    text-align: left;
  }
  .item {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px dotted #ebe3e3;
    padding-bottom: 10px;
    .left {
      width: 50px;
      display: flex;
      justify-content: center;
    }
    .right {
      width: calc(100% - 50px);
      font-size: 14px;
      .nick {
        font-size: 14px;
        position: relative;
        .rate {
          position: absolute;
          right: 10px;
        }
      }
      .content_commnet {
        font-size: 12px;
        text-align: left;
        color: #585858;
        margin-top: 5px;
      }
    }
  }
}
.content {
  text-align: center;
  font-size: 14px;
  margin: 20px 0;
  .price {
    font-size: 12px;
    color: #ff9100;
  }
  .vip {
    font-size: 12px;
    margin-left: 20px;
    color: red;
    i {
      font-size: 16px;
      position: relative;
      top: 2px;
    }
  }
}
</style>